<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-bar title="标题" desc="title">
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '400rpx' }"
                        v-model="title1"
                        clearable
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="取消按钮" desc="cancel">
                <template slot="right">
                    <uxt-switch v-model="cancel" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="关闭按钮" desc="close">
                <template slot="right">
                    <uxt-switch v-model="close" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar
                title="最大高度"
                desc="max-height"
            >
                <template slot="right">
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="maxHeight"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="背景"
                desc="bg-color=xx/颜色值"
                v-model="bgColor"
                light
                gradual
            ></uxt-color-selector-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <view class="bg-theme padding round" @click="show = true">弹出上拉菜单</view>
            </view>
        </uxt-bar-group>
        <uxt-action-sheet
            :actions="actions"
            :title="title1"
            :cancel="cancel"
            :close="close"
            :max-height="getSize2(maxHeight)"
            :bg-color="bgColor"
            @itemclick="handleEvent('itemclick', $event)"
            @cancel="handleEvent('cancel', $event)"
            v-model="show"
        >
        </uxt-action-sheet>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtActionSheet from '@xtcoder/uxt/components/uxt-action-sheet.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtInput,
        uxtSwitch,
        uxtActionSheet,
        uxtColorSelectorBar
    },
    data() {
        return {
            title: '上拉菜单',
            show: false,
            actions: [
                {
                    text: '菜单1'
                },
                {
                    text: '菜单2',
                    disabled: true
                },
                {
                    text: '菜单3',
                    sub: '副文本'
                }
            ],
            title1: '',
            cancel: false,
            close: false,
            maxHeight: '50%',
            bgColor: 'white',
            events: ''
        }
    },
    methods: {
        getSize2(size) {
            if (/^\d+$/g.test(size)) {
                return Number(size)
            } else {
                return size
            }
        },
        handleEvent(type, e) {
            this.events += `@${type}${e !== undefined ? `(${JSON.stringify(e)})` : ''}<br />`
        }
    }
}
</script>

<style lang="scss" scoped></style>
